<style>
  .flex {
    display: flex;
  }
  .pd-5 {
    padding: 10px 10px;
    text-align: center;
  }
  .w-90 {
    width: 90px;
  }
  .w-80 {
    width: 80px;
  }
  .w-160 {
    width: 160px;
  }
</style>
<script src="./vue.js"></script>
<div id="app">
  <div class="flex">
    <div v-for="(title,index) in titles" :key="index" class="pd-5 w-90">
      <span> {{title.name}} </span>
    </div>
  </div>
  <div v-for="(item,index) in tableData" :key="index">
    <div class="flex">
      <div v-for="(title,index2) in titles" :key="index2" class="pd-5 w-90">
        <span v-if="title.prop=='mobile'" class="w-160"
          >{{item['lastDay'][title.prop]}}</span
        >
        <input
          v-else
          type="text"
          v-model="item['lastDay'][title.prop]"
          @input="updateTotal"
          class="w-80"
        />
      </div>
    </div>
    <div class="flex">
      <div v-for="(title,index2) in titles" :key="index2" class="pd-5 w-90">
        <span v-if="title.prop=='mobile'" class="w-160"
          >{{item['today'][title.prop]}}</span
        >
        <input
          v-else
          type="text"
          v-model="item['today'][title.prop]"
          @input="updateTotal"
          class="w-80"
        />
      </div>
    </div>
    <div class="flex">
      <div v-for="(title,index2) in titles" :key="index2" class="pd-5 w-90">
        <span v-if="title.prop=='mobile'" class="w-160"
          >{{item['today'][title.prop]}}</span
        >
        <span v-else
          >{{(Number(item['today'][title.prop]||0) -
          Number(item['lastDay'][title.prop]||0)).toFixed(2)}}</span
        >
      </div>
    </div>
  </div>
  <div>
    <div><span>app个数：</span><span>{{titles.length-2}}</span></div>
    <div>
      <span>money总计：</span><span>{{lastTotal}}</span><span>/</span
      ><span>{{todayTotal}}</span>
    </div>
    <button @click="add">+</button>
    <button @click="logger">logger</button>
  </div>
</div>
<script>
  new Vue({
    el: "#app",
    computed: {
      lastTotal() {
        return this.tableData.reduce((pre, cur) => {
          return pre + Number(cur.lastDay.total);
        }, 0);
      },
      todayTotal() {
        return this.tableData.reduce((pre, cur) => {
          return pre + Number(cur.today.total);
        }, 0);
      },
    },
    data: {
      titles: [
        { name: "手机号", prop: "mobile" },

        { name: "番茄小说", prop: "fanQieXiaoShuo" },
        { name: "番茄畅听", prop: "fanQieChangTing" },
        { name: "番茄畅听音乐版", prop: "fanQieYinYue" },
        { name: "今日头条", prop: "touTiao" },
        { name: "闪电搜索|悟空浏览器", prop: "shanDian" },
        { name: "有柿", prop: "youShi" },
        { name: "抖音", prop: "douYin" },
        { name: "抖音极速版", prop: "douYinJiSu" },
        { name: "头条搜索极速版", prop: "touTiaoJiSu" },
        { name: "西瓜视频", prop: "xiGua" },
        { name: "百度极速版", prop: "baiDuJiSu" },
        { name: "百度畅听版", prop: "baiDuChangTing" },
        { name: "快手极速版", prop: "kuaiShouJiSu" },

        { name: "我爱追剧", prop: "woai" },
        { name: "多多好剧", prop: "duoduo" },
        { name: "爆爽短剧", prop: "baoshuang" },
        { name: "天天追好剧", prop: "tiantian" },
        { name: "开心刷视频", prop: "kaixin" },
        { name: "我爱刷短剧", prop: "woai" },
        { name: "好剧多多", prop: "haoju" },
        { name: "淘金剧场", prop: "taojin" },
        { name: "星芽免费短剧", prop: "xingya" },

        { name: "红果免费短剧", prop: "hongguo" },

        { name: "总计", prop: "total" },
      ],
      tableData: [
        {
          lastDay: {
            mobile: "18762750392",
            touTiao: "1.13",
            shanDian: "2.41",
            youShi: "4.4",
            baiDuJiSu: "1.04",
            baiDuChangTing: "31",
            kuaiShouJiSu: "5.99",
            total: "45.97",
          },
          today: {
            mobile: "18762750392",

            fanQieXiaoShuo: 4.11,
            fanQieChangTing: 8.93,
            fanQieYinYue: 4.06,

            touTiao: "1.13",
            shanDian: "2.41",
            youShi: "4.4",
            baiDuJiSu: "1.04",
            baiDuChangTing: "31",
            kuaiShouJiSu: "5.99",

            douYinJiSu: 3,
            touTiaoJiSu: 3,
            xiGua: 3,

            total: "45.97",
          },
        },
        {
          lastDay: {
            mobile: "13193037083",
            touTiao: 0,
            shanDian: 0,
            youShi: 0,
            baiDuJiSu: "0.38",
            baiDuChangTing: 0,
            kuaiShouJiSu: "16.86",
            total: "17.24",
          },
          today: {
            mobile: "13193037083",
            touTiao: 0,
            shanDian: 0,
            youShi: 0,
            baiDuJiSu: "0.38",
            baiDuChangTing: 0,
            kuaiShouJiSu: "16.86",
            total: "17.24",
          },
        },
        {
          lastDay: {
            mobile: "17764297074",
            touTiao: "12.08",
            shanDian: "9.06",
            youShi: "2.12",
            baiDuJiSu: "5.48",
            baiDuChangTing: "9.7",
            kuaiShouJiSu: "20.59",
            total: "59.03",
          },
          today: {
            mobile: "17764297074",
            touTiao: "12.08",
            shanDian: "9.06",
            youShi: "2.12",
            baiDuJiSu: "5.48",
            baiDuChangTing: "9.7",
            kuaiShouJiSu: "20.59",
            total: "59.03",
          },
        },
        {
          lastDay: {
            mobile: "14751017521",
            touTiao: "6.74",
            shanDian: "6.64",
            youShi: "9.51",
            baiDuJiSu: 0,
            baiDuChangTing: "13.42",
            kuaiShouJiSu: "25",
            total: "61.31",
          },
          today: {
            mobile: "14751017521",
            touTiao: "6.74",
            shanDian: "6.64",
            youShi: "9.51",
            baiDuJiSu: 0,
            baiDuChangTing: "13.42",
            kuaiShouJiSu: "25",
            total: "61.31",
          },
        },
        {
          lastDay: {
            mobile: "18042059337",
            touTiao: "6.92",
            shanDian: "7.25",
            youShi: "10.48",
            baiDuJiSu: "0.16",
            baiDuChangTing: "10.8",
            kuaiShouJiSu: "17.57",
            total: "53.18",
          },
          today: {
            mobile: "18042059337",
            touTiao: "6.92",
            shanDian: "7.25",
            youShi: "10.48",
            baiDuJiSu: "0.16",
            baiDuChangTing: "10.8",
            kuaiShouJiSu: "17.57",
            total: "53.18",
          },
        },
        {
          lastDay: {
            mobile: "19858302953",
            touTiao: "4.29",
            shanDian: "11.6",
            youShi: "6.26",
            baiDuJiSu: "6.74",
            baiDuChangTing: "31",
            kuaiShouJiSu: "13.13",
            total: "73.02",
          },
          today: {
            mobile: "19858302953",
            touTiao: "4.29",
            shanDian: "11.6",
            youShi: "6.26",
            baiDuJiSu: "6.74",
            baiDuChangTing: "31",
            kuaiShouJiSu: "13.13",
            total: "73.02",
          },
        },
      ],
    },
    mounted() {
      this.updateTotal();
    },
    methods: {
      add() {
        this.tableData.push({
          lastDay: {
            mobile: "",
            touTiao: 0,
            shanDian: 0,
            youShi: 0,
            baiDuJiSu: 0,
            baiDuChangTing: 0,
            kuaiShouJiSu: 0,
            total: "",
          },
          today: {
            mobile: "",
            touTiao: 0,
            shanDian: 0,
            youShi: 0,
            baiDuJiSu: 0,
            baiDuChangTing: 0,
            kuaiShouJiSu: 0,
            total: "",
          },
        });
      },
      logger() {
        console.log(JSON.stringify(this.tableData));
      },
      updateTotal() {
        this.tableData = this.tableData.map((item) => {
          let total = 0;
          let todayTotal = 0;
          let lastDay = item.lastDay;
          let today = item.today;
          this.titles.forEach((item2) => {
            total += Number(
              item2.prop == "mobile" || item2.prop == "total"
                ? 0
                : lastDay[item2.prop]
                ? lastDay[item2.prop]
                : 0
            );
            todayTotal += Number(
              item2.prop == "mobile" || item2.prop == "total"
                ? 0
                : today[item2.prop]
                ? today[item2.prop]
                : 0
            );
          });

          return {
            lastDay: {
              ...lastDay,
              total: total.toFixed(2),
            },
            today: {
              ...today,
              total: todayTotal.toFixed(2),
            },
          };
        });
      },
    },
  });
</script>
